<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}"></comp-common>
			<comp-header v-bind="{data:data}"></comp-header>
			<view class="body after-navber">
				<view class="top">
					<view class="top-item">
						<view class="top-num">{{data.info.count}}</view>
						<view>邀请好友总数</view>
					</view>
					<view class="line"></view>
					<view class="top-item">
						<view class="top-num">{{data.info.now_count}}</view>
						<view>今日邀请好友</view>
					</view>
				</view>
				<view class="list">
					<view class="list-title">
						<text>助力好友</text>
						<text class="title-right">助力时间</text>
					</view>
					<view class="list-item" v-for="(item,list) in data.invite_list" :key="list">
						<view class="user-avatar">
							<image :src="item.avatar_url"></image>
						</view>
						<view class="name">{{item.nickname}}</view>
						<view class="time">{{item.invite_time}}</view>
					</view>
					<view class="list-item" v-if="data.length==0">
						<view class="no-friend">暂无助力好友</view>
					</view>
					<view class="loading" v-if="data.loading">正在加载中...</view>
				</view>
			</view>
				<comp-footer v-bind="{data:data}"></comp-footer>
		</view>

	</view>
</template>

<script>var myVue = {};
	export default {
		data() {
			return {
				data: {
					invite_list: [],
					info: [],
					page: 2,
					loading: !1,
					length: 0
				},
			};
		},
		onLoad: function(t) {myVue = this;
			myVue.getApp.page.onLoad(this, t);
			var i = this;
			i.getApp.core.showLoading({
				title: "数据加载中...",
				mask: !0
			}), i.getApp.request({
				url: i.getApp.api.step.invite_detail,
				data: {
					page: 1
				},
				success: function(t) {
					i.getApp.core.hideLoading();
					var a = t.data.info,
						e = t.data.invite_list,
						n = e.length;
					i.setData({
						info: a,
						length: n,
						invite_list: e
					});
				}
			});
		},
		onReady: function() {},
		onShow: function() {},
		onHide: function() {},
		onUnload: function() {},
		onPullDownRefresh: function() {},
		onReachBottom: function() {
			var t = this,
				i = t.data.over,
				a = t.data.invite_list;
			if (!i) {
				var e = this.data.page;
				this.setData({
					loading: !0
				}), t.getApp.request({
					url: t.getApp.api.step.invite_detail,
					data: {
						page: e
					},
					success: function(n) {
						for (var o = 0; o < n.data.invite_list.length; o++) a.push(n.data.invite_list[o]);
						n.data.invite_list.length < 15 && (i = !0), t.setData({
							page: e + 1,
							over: i,
							loading: !1,
							invite_list: a
						});
					}
				});
			}
		},
		onShareAppMessage: function() {}
	}
</script>

<style scoped>
	.top { 
		margin: 24upx 24upx 20upx; 
		background-color: #fff; 
		height: 200upx; 
		position: relative; 
		color: #999999; 
		padding: 50upx 0; 
		font-size: 9pt; 
		border-radius: 16upx; 
	} 
 
	.title-right { 
		float: right; 
	} 
 
	.top-num { 
		font-size: 18pt; 
		color: #ff9d1e; 
		font-family: 'DIN'; 
		margin-bottom: 5upx; 
	} 
 
	.line { 
		position: absolute; 
		top: 50upx; 
		left: 50%; 
		height: 100upx; 
		width: 2upx; 
		background-color: #e2e2e2; 
	} 
 
	.top-item { 
		width: 50%; 
		float: left; 
		text-align: center; 
	} 
 
	.list { 
		background-color: white; 
		padding: 32upx 32upx 16upx; 
		border-radius: 16upx; 
		margin: 0 24upx 24upx; 
	} 
 
	.list-title { 
		font-size: 14pt; 
		color: #353535; 
		margin-bottom: 38upx; 
	} 
 
	.list-item { 
		padding-bottom: 38upx; 
		height: 88upx; 
	} 
 
	.list-item .user-avatar { 
		height: 56upx; 
		width: 56upx; 
		margin-right: 24upx; 
		float: left; 
	} 
 
	.user-avatar image { 
		height: 100%; 
		width: 100%; 
		border-radius: 28upx; 
	} 
 
	.name { 
		float: left; 
		font-size: 11pt; 
		color: #353535; 
		width: 350upx; 
		overflow: hidden; 
		text-overflow: ellipsis; 
		white-space: nowrap; 
		vertical-align: top; 
		height: 56upx; 
		line-height: 56upx; 
	} 
 
	.time { 
		float: right; 
		font-size: 9pt; 
		color: #999999; 
		vertical-align: top; 
		height: 56upx; 
		line-height: 56upx; 
	} 
 
	.no-friend { 
		margin-top: 120upx; 
		text-align: center; 
	} 
 
	.loading { 
		font-size: 9pt; 
		color: #353535; 
		text-align: center; 
		height: 80upx; 
		line-height: 80upx; 
		background-color: white; 
	}
</style>
